<template>
  <div class="vol-menu-filter" v-if="$global.navSearch">
    <el-select
      placement="bottom"
      v-model="searchValue"
      clearable
      filterable
      remote
      reserve-keyword
      style="width: 160px"
      :placeholder="$ts('请输入') + '...'"
      :remote-method="remoteMethod"
      @change="selectChange"
    >
      <template #prefix><i class="el-icon-search"></i></template>
      <el-option v-for="item in menuData" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
  </div>
</template>
<script setup>
import {
  defineComponent,
  reactive,
  watch,
  ref,
  toRef,
  toRefs,
  computed,
  getCurrentInstance,
  defineProps
  // onMounted,
} from 'vue'
import store from '@/store/index.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  onSelect: {
    type: Function,
    default: (x) => {}
  }
})

const searchValue = ref('')
const remoteMethod = (query) => {
  if (!query) {
    return []
  }
  menuData.value = store.state.permission.filter((x) => {
    return (
      x.enable == 1 &&
      x.name.indexOf(query) != -1 &&
      !store.state.permission.some((c) => {
        return c.parentId === x.id&&x.id
      })
    )
  })
}
const menuData = ref([])

const selectChange = (id) => {
  let _item = store.state.permission.find((c) => {
    return c.id == id
  })
  if (!_item) {
    return
  }

  if (_item.linkType == 1) {
    window.open(_item.url || _item.path, '_blank')
    return
  }
  const item = _item
  //大屏设计(2023.11.05)
  if (item.linkType == 3 || item.linkType == 4) {
    let params =
      item.linkType == 3 //大屏设计器
        ? { path: item.url }
        : { id: item.url } //大屏数据
    proxy.http.getDataViewAccessToken(params)
    return
  }


  props.onSelect(_item.id, _item)
  router.push({ path: _item.path || '', query: _item.query })
}
</script>
<style lang="less" scoped>
.vol-menu-filter {
  height: 60px;
  align-items: center;
  display: flex;
  ::v-deep(.el-input__wrapper) {
    border-radius: 20px;
  }
}
</style>
